<template>
  <div>
    <MHeader>首页</MHeader>
    <div class="content">
      <Loading v-if="loading">疯狂加载中</Loading>
      <template v-else>
        <Swiper :swiperSlides="sliders"></Swiper>
        <div class="container">
          <h3>热门图书</h3>
          <ul>
            <li v-for="hot in hotBooks">
              <img :src="hot.bookCover" ></img>
              <b>{{hot.bookName}}</b>
            </li>
          </ul>
        </div>
      </template>

    </div>
  </div>
</template>

<script>
  // 1、引入组件
  //    2、注册组件
  //    3、使用组件

  import MHeader from '../base/MHeader'

  import Swiper from '../base/Swiper'

  import {getAll} from '../api'

  import  Loading from '../base/Loading'

  export default {
     created(){
      this.getData(); //获取轮播图
      this.getHot();  //获取热门图书

    },
    data() {
      return {sliders:[],hotBooks:[],loading:true}
    },
    methods: {
      async getData(){
        // 结构赋值
        let [sliders,hotBooks] = await getAll();

        this.sliders = sliders;
        this.hotBooks = hotBooks;
        this.loading = false;
      }
    },
    computed: {},
    components: {MHeader,Swiper,Loading}
  }
</script>

<style scoped lang="less">
  h3{
    color:#999;
    padding: 5px 0;
  }
  .container{
    width: 90%;
    margin:0 auto;
    ul{
      display: flex;
      flex-wrap:wrap; //默认不换行
      li{
        width: 50%;
        img{ width: 100%}
        margin: 5px 0;
        b{
          display: -webkit-flex;
          -webkit-justify-content: center;
          -webkit-align-items: center;
        }
      }
    }
  }

</style>
